<template>
  <div id="calendar">
    <!-- 年份 月份 -->
    <div class="canlendar-header">
			<p class="pre">
        <span class="clickBtn" @click="pickPre(currentYear,currentMonth)">
          <i class="el-icon-arrow-left" name="preMonth" />
        </span>
      </p>
      <p class="currenDate">{{ `${currentYear}年${currentMonth}月` }}</p>
      <p class="next">
        <span class="clickBtn" @click="pickNext(currentYear,currentMonth)">
          <i class="el-icon-arrow-right" name="nextMonth" />
        </span>
      </p>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li v-for="(item,index) in weekDays" :key="index">{{item.weekCh}}</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
      <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
      <li v-for="(dayobject,i) in days" :key="i">
         <!-- 非当月日期 -->
        <div v-if="dayobject.dateClassify =='lastMonth'" class="other-month" :class="{active:selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}">
           <!-- <div @click="getDayTime(dayobject.day)"> -->
            <span class="dateStyle">{{ dayobject.day.getDate() }}</span>
            <br>
            <span v-if="dayobject.dayStatus ==1" class="dotStyle">.</span>
            <span v-else style="color:transparent" class="dotStyle">.</span>
        </div>
        <!-- 当月日期 -->
        <!-- <div v-if="dayobject.dateClassify =='currentMonth'"> -->
          <!-- 当月今天日期 -->
          <div v-if="dayobject.dateClassify =='today'"
              class="today"
              :class="{active:selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}"
              @click="getDayTime(dayobject.day)">
              <span class="dateStyle">今天</span>
              <br>
              <span v-if="dayobject.dayStatus ==1" class="dotStyle" :class="{redDot:dayobject.haveUndone ==1&&selectDay !=dayobject.day.getMonth()+'-'+dayobject.day.getDate(),grayDot:dayobject.haveUndone ==0&&selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}">.</span>
              <span v-else style="color:transparent" class="dotStyle" :class="{redDot:dayobject.haveUndone ==1&&selectDay !=dayobject.day.getMonth()+'-'+dayobject.day.getDate(),grayDot:dayobject.haveUndone ==0&&selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}">.</span>
          </div>
          <!-- 当月除今天以外的日期 -->
          <div v-if="dayobject.dateClassify =='currentMonth'" :class="{active:selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}" @click="getDayTime(dayobject.day)">
            <span class="dateStyle">{{ dayobject.day.getDate() }}</span>
            <br>
            <span v-if="dayobject.dayStatus ==1" class="dotStyle" :class="{redDot:dayobject.haveUndone ==1&&selectDay !=dayobject.day.getMonth()+'-'+dayobject.day.getDate(),grayDot:dayobject.haveUndone !=0&&selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}">.</span>
            <span v-else style="color:transparent" class="dotStyle" :class="{redDot:dayobject.haveUndone ==1&&selectDay !=dayobject.day.getMonth()+'-'+dayobject.day.getDate(),grayDot:dayobject.haveUndone ==0&&selectDay ==dayobject.day.getMonth()+'-'+dayobject.day.getDate()}">.</span>
          </div>
        <!-- </div> -->
      </li>
    </ul>
  </div>
</template>
<script>
import {calendarMarkData} from '@/api/workStation/workStation.js'
export default {
  props:['selectDate'],
  data() {
    return {
     selectDay:(new Date()).getMonth()+'-'+(new Date()).getDate(),
     weekDays:[
     	{
				 weekCh:'一',
				 weekEn:'Mo'
			 },
			 {
				 weekCh:'二',
				 weekEn:'Tuu'
			 },{
				 weekCh:'三',
				 weekEn:'We'
			 },{
				 weekCh:'四',
				 weekEn:'Th'
			 },{
				 weekCh:'五',
				 weekEn:'Fr'
			 },{
				 weekCh:'六',
				 weekEn:'Sat'
			 },{
				 weekCh:'日',
				 weekEn:'Sun'
			 }
     ],
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: [],
    };
  },
  created() {
    // 在vue初始化时调用
    this.getCalendarMark()
    //this.initData(null);
  },
  computed:{
   
  },
  watch:{
    
  },
  mounted(){
  },
  methods: {
    initData: function(cur,datas) {
      // var leftcount = 0 // 存放剩余数量
      var date;
      if (cur) {
        date = new Date(cur);
      } else {
        var now = new Date();
        date = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek === 0) {
        this.currentWeek = 7;
      }
      var str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      );
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      // 初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        var d2 = new Date(str);
        d2.setDate(d2.getDate() - i);
        var dayobjectSelf = {}; // 用一个对象包装Date对象  以便为以后预定功能添加属性
        dayobjectSelf.day = d2;
        dayobjectSelf.date = this.formatDate(d2.getFullYear(),d2.getMonth()+1,d2.getDate());
            //上一个月或下一个月的日期
        if(dayobjectSelf.day.getMonth() +1 != this.currentMonth){
          dayobjectSelf.dateClassify = 'lastMonth'
        }else if(dayobjectSelf.day.getMonth() +1 == this.currentMonth){
          if(dayobjectSelf.day.getFullYear() == new Date().getFullYear()&&dayobjectSelf.day.getMonth() == new Date().getMonth()&&dayobjectSelf.day.getDate() == new Date().getDate()){
            //当月今天
            dayobjectSelf.dateClassify = 'today'
          }else{
             dayobjectSelf.dateClassify = 'currentMonth'
          }
        }
        if(datas&&datas.length >0){
          datas.map(item =>{
            if(item.date ==dayobjectSelf.date &&item.nums !=0){
              dayobjectSelf.dayStatus = 1  //当天有任务
            }
            if(item.date ==dayobjectSelf.date &&item.nums ==0){
              dayobjectSelf.dayStatus = 0  //当天没有任务
            }
            if(item.date ==dayobjectSelf.date &&item.undone ==0){
              dayobjectSelf.haveUndone = 0  //已完成
            }
            if(item.date ==dayobjectSelf.date &&item.undone !=0){
              dayobjectSelf.haveUndone = 1  //未完成
            }
          })
        }
        this.days.push(dayobjectSelf); // 将日期放入data 中的days数组 供页面渲染使用
      }
      // 其他周
      for (var j = 1; j <= 42 - this.currentWeek; j++) {
        var d3 = new Date(str);
        d3.setDate(d3.getDate() + j);
        var dayobjectOther = {};
        dayobjectOther.day = d3;
        dayobjectOther.date = this.formatDate(d3.getFullYear(),d3.getMonth()+1,d3.getDate());
        //上一个月或下一个月的日期
        if(dayobjectOther.day.getMonth() +1 != this.currentMonth){
          dayobjectOther.dateClassify = 'lastMonth'
        }else if(dayobjectOther.day.getMonth() +1 == this.currentMonth){
          if(dayobjectOther.day.getFullYear() == new Date().getFullYear()&&dayobjectOther.day.getMonth() == new Date().getMonth()&&dayobjectOther.day.getDate() == new Date().getDate()){
            //当月今天
            dayobjectOther.dateClassify = 'today'
          }else{
             dayobjectOther.dateClassify = 'currentMonth'
          }
        }
        if(datas&&datas.length >0){
          datas.map(item =>{
            if(item.date ==dayobjectOther.date &&item.nums !=0){
              dayobjectOther.dayStatus = 1  //当天有任务
            }
            if(item.date ==dayobjectOther.date &&item.nums ==0){
              dayobjectOther.dayStatus = 0  //当天没有任务
            }
            if(item.date ==dayobjectOther.date &&item.undone ==0){
              dayobjectOther.haveUndone = 0  //已完成
            }
            if(item.date ==dayobjectOther.date &&item.undone !=0){
              dayobjectOther.haveUndone = 1  //未完成
            }
          })
        }
        this.days.push(dayobjectOther);
      }
    },
     //获取日期标记点
    getCalendarMark(date){
      let params = {
        account:this.$store.getters.userInfo.account,
        currDate:date?date:this.$utils.getCurrentDate(1),
      }
      calendarMarkData(params).then(res =>{
        if(res.code ==200){
          let datas = res.data
          this.initData(date,datas);
        }
      },
      err =>{
        this.$message.error(err)
      })
    },
    getDayTime(el) {
     let currentDate =  el.getFullYear()+'-'+el.getMonth()+'-'+el.getDate()
      this.selectDay = el.getMonth()+'-'+el.getDate()
      let nowData = new Date()
      this.$emit('clickDate',el)
    },
    
    pickPre: function(year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.getCalendarMark(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
      this.$emit('preClick',d)
      //this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickNext: function(year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(42);
      this.getCalendarMark(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
      this.$emit('nextClick',d)
      //this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year, month, day) {
      var y = year;
      var m = month;
      if (m < 10) m = "0" + m;
      var d = day;
      if (d < 10) d = "0" + d;
      return y + "-" + m + "-" + d;
    }
  }
};
</script>
<style lang="less" scoped>
#calendar {
  width: 100%;
	height:100%;
	font-size: 14px;
	overflow: auto;
  //box-shadow: 1px 0px 0px 0px rgba(204, 204, 204, 0.4);
}
.canlendar-header {
    display: flex;
    height: 24px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .currenDate {
      margin: 0 20px;
      font-size: 16px;
    }
    .clickBtn{
      background: #F4F4F4;
      border: 1px solid #D3D3D3;
      cursor: pointer;
      border-radius: 2px;
      display: inline-block;
      width: 22px;
      height: 22px;
    }
}

.year-month {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.choose-month {
  text-align: center;
}
.arrow {
  padding: 15px;
  color: #999999;
}
.weekdays {
  padding: 10px 10px 0px 10px;
  display: flex;
  color: #999;
	flex-direction: row;
  justify-content: space-between;
}
.days {
  //margin-top:18px;
  display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
}
.days li {
  list-style-type: none;
  display: inline-block;
  width: 13%;
  text-align: center;
  //padding-top: 10px;
  cursor: pointer;
}
.days li .today {
  /* padding: 6px 10px;
  border-radius: 50%;
  background: @kr-elementUI-color; */
  color: @kr-elementUI-color;
}
.dotStyle{
  font-size: 24px;
  line-height: 0px;
  vertical-align: super;
}
.dateStyle{
  line-height: 8px;
  vertical-align: bottom;
}
.redDot{
  color:#EE4141;
}
.grayDot{
  color:#e1e1e1;
}
.days li .active {
  border-radius: 50%;
  background: @kr-elementUI-color;
  color: #fff!important;
}
.days li .other-month {
  color: #e1e1e1;
  cursor: default;
}
.days li:hover{
  border-radius: 50%;
  background: #EEF5FC;
  //color: #fff;
}
</style>